<template>
<div>
<el-main class="pw-2 pt-3">
  <el-alert
    title="说明"
    type="success"
    description="menu manage: tab test"
    close-text="知道了"
    class="mb-2"
  >
  </el-alert>

  <ion-button @click="onClick" size="small" color="dark">    Click me   </ion-button>

  <input v-model="$store.state.user.userName" />

  <div @click="sex.show=true">弹1个按钮框 {{ sex.value }}</div>
  <lz-sheet :p_show="sex.show" p_title="选择性别" :p_data="sex.data"
   @submit="getSex"  @close="sex.show=false"   />

  <el-tabs
  v-model="editableTabsValue"
  type="border-card"
  closable
  @tab-remove="removeTab"
>
  <el-tab-pane
    v-for="(item,index) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}} -  {{index}}
    <input type="text" placeholder="test ">
  </el-tab-pane>
</el-tabs>
</el-main>
</div>
</template>

<script lang="ts">
import { IonButton } from '@ionic/vue';
import {API,MUTION} from '@/utils/common'
import store from '@/store/IndexStore'
// import MyMenu from '@/comps/MyMenu.vue'
import LzSheet from '@/comps/LzSheet.vue'
import { defineComponent } from 'vue'
import { base } from '@/mixin/base'
// 下一行不检查 eslint-disable-next-line
// 本文件不检查 eslint-disable
// 无效只能去掉ts文件 @ts-ignore
export default defineComponent({
  name: 'menus',
  mixins: [base],
  data(){
    return {
      api: API.USER,
      editableTabsValue: '22',
      editableTabs: [
        {
          title: 'Tab 1',
          name: '11',
          value: 'Tab 1 content',
        },
        {
          title: 'Tab 2',
          name: '22',
          content: 'Tab 2 content',
        },
      ],
      // tabIndex: 2,
      sex:{
        show: false,
        value: '',
        data:[
          {
            id: 1,
            name: "男",
          },
          {
            id: 2,
            name: "女",
          },
        ],
      }
    }
  },
  methods: {
    removeTab(targetName) {
      let tabs = this.editableTabs
    //   let activeName = this.editableTabsValue
    //   if (activeName === targetName) {
    //     tabs.forEach((tab, index) => {
    //       if (tab.name === targetName) {
    //         let nextTab = tabs[index + 1] || tabs[index - 1]
    //         if (nextTab) {
    //           activeName = nextTab.name
    //         }
    //       }
    //     })
    //   }
    //   this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },
    onClick(){
      console.log('ccc',store,(store.state as any).user.userName);
      store.commit('user/test',{id:1,name:'123'})
    },
    getSex(obj) {
      this.sex.show = false
      this.sex.value = obj.name;
    },
  },
  components: {
    LzSheet,IonButton
  }
})
</script>